<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background: url("img/ bg.png") no-repeat 0 0/100%;
        }
        .box{
            height: 70px;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left{
            width: 479px;
            height: 16px;
            /*background-color: #f0cdb9;*/
            display: flex;
            justify-content: space-between;
            margin-left: 36px;
            color: #fff;
        }

        .right{
            width: 177px;
            height: 16px;
            /*background-color: #ff00de;*/
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 36px;
            color: #fff;
        }

        .right img{
            width: 30px;
            height: 28px;
        }

        a{
            color: #fff;
            text-decoration: none;
        }

        .set{
            width: 55px;
            /*background-color: #fff;*/
        }

        .logo{
            height: 164px;
            /*background-color: #f0cdb9;*/
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .logo img{
            width: 203px;
            height: 81px;
        }

        .search{
            height: 77px;
            /*background-color: #f0ad4e;*/
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

        .search .input{
            width: 630px;
            height: 50px;
            border: 1px solid #666;
            padding: 0;
            outline: none;
        }

        .search .btn{
            width: 124px;
            height: 52px;
            border-radius: 0;
            outline: none;
        }

        .content{
            width: 1256px;
            height: 410px;
            opacity: 0.85;
            background: #ffffff;
            border-radius: 20px;
            margin: 123px auto 0;
        }
    </style>
</head>
<body>

<div class="box">
    <div class="left">
        <a href="#">新闻</a>
        <a href="#">官网</a>
        <a href="#">地图</a>
        <a href="#">直播</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#">学术</a>
        <a href="#">更多</a>
    </div>
    <div class="right">
        <span class="set">设置</span>
        <img src="img/%20header.png">
        <span>lexSeven</span>
    </div>
</div>
<div class="logo">
    <img src="img/logo.png">
</div>

<div class="search">
    <input type="text" class="input" id="text">
    <input type="button" class="btn" value="开心一下" id="btn">
</div>

<div class="content"></div>



<script>
    let btn = document.querySelector('#btn');
    let text = document.querySelector('#text');

    btn.onclick = function(){
        window.location.href = 'http://www.baidu.com/s?wd='+ text.value
    }
</script>

</body>
</html>